<script lang="ts" setup>
import Selector from "@/components/Selector.vue";
import Inputter from "@/components/Inputter.vue";
import instance from '@/utils/request';
import { useUserStore } from "@/stores/user";
import router from "@/router/router";
import { ElMessage } from 'element-plus';
import { ref, onMounted } from "vue";

// 用户入住历史页面
onMounted(() => {
  init();
});

const user = useUserStore();

// 搜索
const order_room_id_select = ref("");
const order_stay_name_select = ref("");
const order_room_type_select = ref("全部");
const order_room_price_select = ref("");
const order_status_select = ref("全部");
const order_start_time_select = ref("");
const order_end_time_select = ref("");

// 类型的下拉框（查询）
const order_room_type_options = [
  { value:'全部', label:'全部' },
  { value:'标准间', label:'标准间' },
  { value:'大床房', label:'大床房' },
  { value:'双床房', label:'双床房' },
  { value:'家庭房', label:'家庭房' }
];

// 状态的下拉框（查询）
const order_status_options = [
  { value:'全部', label:'全部' },
  { value:'已退订', label:'已退订' },
  { value:'已退房', label:'已退房' }
];

interface Data {
  order_room_id: string
  order_stay_name: string
  order_room_type: string
  order_room_price: string
  order_status: string
  order_start_time: string
  order_end_time: string
}

// 不同状态不同样式
const rowClassName = ({row, rowIndex,}: {
  row: Data
  rowIndex: number
}) => {
  if (row.order_status === '已退订') {
    return 'color-user-history-1';
  }
  else if (row.order_status === '已退房') {
    return 'color-user-history-2';
  }
  return '';
}

// 数据
let tableData = [];

// 条件查询
const filterTableData = ref();
function filter() {
  filterTableData.value = tableData.filter((data) =>
      (!order_room_id_select.value || data.order_room_id.toString().includes(order_room_id_select.value)) &&
      (!order_stay_name_select.value || data.order_stay_name.toString().includes(order_stay_name_select.value)) &&
      (order_room_type_select.value === '全部' || data.order_room_type.includes(order_room_type_select.value)) &&
      (!order_room_price_select.value || data.order_room_price.includes(order_room_price_select.value)) &&
      (order_status_select.value === '全部' || data.order_status.includes(order_status_select.value)) &&
      (!order_start_time_select.value || data.order_start_time.includes(order_start_time_select.value)) &&
      (!order_end_time_select.value || data.order_end_time.includes(order_end_time_select.value))
  );
}

function init() {
  // 初始化
  instance.request({
    url: 'user/center/history/init',
    method: 'POST',
    data: {
      order_user_id: user.user_id
    },
    headers: { "User-Id": user.user_id }
  })
      .then(function(response) {
        if(response.data.code === "ERROR") {
          ElMessage({
            message: "初始化失败！",
            type: "error"
          });
        }
        if(response.data.code === "SUCCESS") {
          tableData = response.data.data;
          filterTableData.value = tableData;
        }
      })
      .catch(function(error){
        console.log(error);
        if(error.response.request.status === 401) {
          ElMessage({
            message: "您的连接已被注销！",
            type: "error"
          });
          user.logout();
          router.push("/user/index");
          return;
        }
        ElMessage({
          message: "初始化失败！",
          type: "error"
        });
        setTimeout(() => {
          init();
        }, 2000 );
      });
}
</script>

<template>
  <div class="select">
    <span>房间号：</span>
    <inputter width="100" v-model="order_room_id_select"/>

    &emsp;&emsp;<span>入住人：</span>
    <inputter width="100" v-model="order_stay_name_select"/>

    &emsp;&emsp;<span>类型：</span>
    <selector :options="order_room_type_options" width="100" v-model="order_room_type_select"/>

    &emsp;&emsp;<span>价格：</span>
    <inputter width="100" v-model="order_room_price_select"/>

    &emsp;&emsp;<span>状态：</span>
    <selector :options="order_status_options" width="100" v-model="order_status_select"/>

    <!--
    <br><br><span>入住时间：</span>
    <inputter width="200" v-model="order_start_time_select"/>

    &emsp;&emsp;<span>退房时间：</span>
    <inputter width="200" v-model="order_end_time_select"/>
    -->

    &emsp;&emsp;
    <el-button color="#568fc1" class="button-color" @click="filter">
      <span>搜索</span>
    </el-button>
  </div>

  <div class="table">
    <el-table
        header-row-style="color: #000000; background-color: #f0f0f0;"
        height="600"
        style="width: 100%"
        :data="filterTableData"
        :row-class-name="rowClassName"
    >
      <el-table-column prop="order_room_id" label="房间号" width="100"/>
      <el-table-column prop="order_stay_name" label="入住人" width="150"/>
      <el-table-column prop="order_room_type" label="类型" width="150"/>
      <el-table-column prop="order_room_price" label="价格" width="150"/>
      <el-table-column prop="order_status" label="状态" width="100"/>
      <el-table-column prop="order_start_time" label="入住时间" width="220"/>
      <el-table-column prop="order_end_time" label="退房时间" width="220"/>
    </el-table>
  </div>
</template>

<style scoped>
.select {
  padding-top: 2vh;
  padding-left: 8vh;
  padding-right: 5vh;
  /* border: 1px solid black; */
}
.table {
  padding: 1vh 5vh 5vh;
  /* border: 1px solid black; */
}
.button-color {
  --el-button-hover-bg-color: rgb(238, 244, 249) !important;
  --el-button-hover-text-color: #568fc1 !important;
  --el-button-text-color: white !important;
}
</style>

<style>
.el-table .color-user-history-1 {
  --el-table-tr-bg-color: #f0f0f0;
  --el-table-row-hover-bg-color: #f0f0f0;

}
.el-table .color-user-history-2 {
  --el-table-tr-bg-color: #e4f7fb;
  --el-table-row-hover-bg-color: #e4f7fb;
}
</style>